<template>
  <div class="astronomy-event-calendar">
    <div class="calendar-header">
      <h2 class="calendar-title">天文事件日历</h2>
      <div class="calendar-controls">
        <button @click="prevMonth" class="nav-button">← 上个月</button>
        <span class="current-month">{{ currentMonthYear }}</span>
        <button @click="nextMonth" class="nav-button">下个月 →</button>
      </div>
      <div class="event-filters">
        <select v-model="selectedEventType" @change="filterEvents" class="filter-select">
          <option value="">所有事件类型</option>
          <option v-for="type in eventTypes" :key="type.value" :value="type.value">
            {{ type.label }}
          </option>
        </select>
        <input 
          v-model="searchQuery" 
          @input="filterEvents" 
          type="text" 
          placeholder="搜索事件..." 
          class="search-input"
        />
      </div>
    </div>

    <!-- 日历视图 -->
    <div class="calendar-grid">
      <div class="weekdays">
        <div class="weekday" v-for="day in weekdays" :key="day">{{ day }}</div>
      </div>
      <div class="calendar-days">
        <div 
          v-for="day in calendarDays" 
          :key="day.date"
          :class="[
            'calendar-day',
            { 'other-month': !day.isCurrentMonth },
            { 'today': day.isToday },
            { 'has-event': day.events.length > 0 }
          ]"
          @click="selectDay(day)"
        >
          <span class="day-number">{{ day.date.getDate() }}</span>
          <div class="day-events" v-if="day.events.length > 0">
            <div 
              v-for="event in day.events.slice(0, 2)" 
              :key="event.id"
              :class="['event-indicator', `event-${event.type}`]"
              :title="event.title"
            ></div>
            <div v-if="day.events.length > 2" class="more-events" :title="`还有 ${day.events.length - 2} 个事件`">
              +{{ day.events.length - 2 }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 选中日期的事件详情 -->
    <div v-if="selectedDay" class="selected-day-events">
      <h3>{{ formatDate(selectedDay.date) }} 的天文事件</h3>
      <div v-if="selectedDay.events.length === 0" class="no-events">
        当天没有天文事件
      </div>
      <div v-else class="event-list">
        <div 
          v-for="event in selectedDay.events" 
          :key="event.id"
          class="event-card"
          :class="`event-type-${event.type}`"
        >
          <div class="event-header">
            <div class="event-title">{{ event.title }}</div>
            <div class="event-type-badge">{{ getEventTypeLabel(event.type) }}</div>
          </div>
          <div class="event-time">
            <div class="event-clock">🕒</div>
            <div>{{ formatTime(event.date) }}</div>
          </div>
          <div class="event-description">{{ event.description }}</div>
          <div class="event-details">
            <div class="detail-item">
              <span class="detail-label">可见范围:</span>
              <span class="detail-value">{{ event.visibility }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">最佳观测时间:</span>
              <span class="detail-value">{{ event.bestTime }}</span>
            </div>
            <div v-if="event.magnitude !== null" class="detail-item">
              <span class="detail-label">亮度:</span>
              <span class="detail-value">{{ event.magnitude }} (等)</span>
            </div>
          </div>
          <div class="event-tags">
            <span 
              v-for="tag in event.tags" 
              :key="tag" 
              class="event-tag"
              :class="{ 'matched-tag': isUserInterest(tag) }"
            >
              #{{ tag }}
            </span>
          </div>
          
          <!-- 通知状态消息 -->
          <div v-if="notificationMessage" class="notification-message" :class="notificationStatus">
            {{ notificationMessage }}
          </div>
          
          <!-- 提醒设置区域 -->
          <div class="reminder-section" v-if="!hasEventReminder(event.id)">
            <h3>设置提醒</h3>
            
            <!-- 浏览器通知设置 -->
            <div class="reminder-option">
              <h4>浏览器通知</h4>
              <div class="reminder-controls">
                <select v-model="selectedReminderTime" class="reminder-time-select">
                  <option v-for="time in reminderTimes" :key="time.value" :value="time.value">
                    {{ time.label }}
                  </option>
                </select>
                <button 
                  class="reminder-button browser-reminder"
                  @click="setEventReminder(event)"
                >
                  设置浏览器提醒
                </button>
              </div>
            </div>
            
            <!-- 邮件通知设置 -->
            <div class="reminder-option">
              <h4>邮件通知</h4>
              <button 
                class="reminder-button email-reminder"
                @click="setEmailReminder(event)"
              >
                设置邮件提醒
              </button>
              <small class="reminder-note">
                需要在设置中配置邮箱地址
              </small>
            </div>
          </div>
          
          <!-- 已设置提醒提示 -->
          <div class="reminder-set" v-else>
            <span class="check-icon">✓</span>
            <span>已为该事件设置提醒</span>
            <small>您可以在通知设置中管理所有提醒</small>
          </div>
        </div>
      </div>
    </div>

    <!-- 近期事件列表 -->
    <div class="upcoming-events">
      <h3>近期天文事件</h3>
      <div class="upcoming-list">
        <div 
          v-for="event in upcomingEvents.slice(0, 5)" 
          :key="event.id"
          class="upcoming-item"
          @click="selectEventDay(event)"
        >
          <div class="event-date">
            <div class="event-month">{{ formatMonthShort(event.date) }}</div>
            <div class="event-day">{{ formatDayOfMonth(event.date) }}</div>
          </div>
          <div class="event-info">
            <div class="event-title">{{ event.title }}</div>
            <div class="event-meta">
              <span class="event-type">{{ getEventTypeLabel(event.type) }}</span>
              <span class="event-time">{{ formatTime(event.date) }}</span>
            </div>
          </div>
          <div class="event-icon" :class="`icon-${event.type}`"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue';
import { 
  astronomicalEvents, 
  getEventsByType, 
  getUpcomingEvents, 
  getEventTypes 
} from '../data/astronomicalEvents';
import notificationService from '../services/NotificationService'
import emailNotificationService from '../services/EmailNotificationService';

export default {
  name: 'AstronomyEventCalendar',
  setup() {
    const currentDate = ref(new Date());
    const selectedDay = ref(null);
    const selectedEventType = ref('');
    const searchQuery = ref('');
    const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
    
    // 通知相关状态
    const notificationStatus = ref('');
    const notificationMessage = ref('');
    const reminderTimes = ref([
      { label: '15分钟前', value: 15 },
      { label: '30分钟前', value: 30 },
      { label: '1小时前', value: 60 },
      { label: '2小时前', value: 120 },
      { label: '1天前', value: 1440 }
    ]);
    const selectedReminderTime = ref(60); // 默认1小时前提醒
    
    // 获取事件类型列表
    const eventTypes = computed(() => getEventTypes());
    
    // 计算当前显示的月份和年份
    const currentMonthYear = computed(() => {
      return `${currentDate.value.getFullYear()}年 ${currentDate.value.getMonth() + 1}月`;
    });
    
    // 计算事件推荐分数
    const calculateEventScore = (event) => {
      try {
        // 获取用户兴趣标签
        const savedTags = localStorage.getItem('userInterestTags');
        const userTags = savedTags ? JSON.parse(savedTags) : ['高可见度', '推荐观测'];
        
        // 获取事件类型优先级
        const savedPriorities = localStorage.getItem('eventTypePriorities');
        const typePriorities = savedPriorities ? JSON.parse(savedPriorities) : {};
        
        // 获取用户经验级别
        const savedExperience = localStorage.getItem('userExperienceLevel');
        const experienceLevel = savedExperience || 'beginner';
        
        let score = 0;
        
        // 根据标签匹配加分
        event.tags.forEach(tag => {
          if (userTags.includes(tag)) {
            score += 10;
          }
        });
        
        // 根据事件类型优先级加分
        const typePriority = typePriorities[event.type] || 3;
        score += typePriority * 5;
        
        // 根据观测经验调整分数
        if (experienceLevel === 'beginner' && event.tags.includes('高可见度')) {
          score += 8;
        }
        
        // 根据日期时间调整分数（近期事件优先）
        const eventDate = new Date(event.date);
        const now = new Date();
        const daysUntil = Math.floor((eventDate - now) / (1000 * 60 * 60 * 24));
        
        if (daysUntil >= 0 && daysUntil <= 7) {
          score += 15; // 未来7天内的事件
        } else if (daysUntil > 7 && daysUntil <= 30) {
          score += 5; // 未来30天内的事件
        }
        
        return score;
      } catch (error) {
        console.error('计算事件分数失败:', error);
        return 0;
      }
    };
    
    // 获取按推荐排序的事件列表
    const getRecommendedEvents = (events) => {
      return [...events].sort((a, b) => calculateEventScore(b) - calculateEventScore(a));
    };
    
    // 计算日历天数据
    const calendarDays = computed(() => {
      const year = currentDate.value.getFullYear();
      const month = currentDate.value.getMonth();
      
      const daysInMonth = new Date(year, month + 1, 0).getDate();
      const firstDayOfMonth = new Date(year, month, 1).getDay();
      
      const days = [];
      
      // 添加上个月的日期
      const prevMonthDays = firstDayOfMonth;
      const daysInPrevMonth = new Date(year, month, 0).getDate();
      
      for (let i = prevMonthDays - 1; i >= 0; i--) {
        const date = new Date(year, month - 1, daysInPrevMonth - i);
        const events = getEventsForDate(date);
        days.push({
          date,
          isCurrentMonth: false,
          isToday: isToday(date),
          events: getRecommendedEvents(events)
        });
      }
      
      // 添加当前月的日期
      for (let i = 1; i <= daysInMonth; i++) {
        const date = new Date(year, month, i);
        const events = getEventsForDate(date);
        days.push({
          date,
          isCurrentMonth: true,
          isToday: isToday(date),
          events: getRecommendedEvents(events)
        });
      }
      
      // 添加下个月的日期以填满网格
      const remainingDays = 42 - days.length; // 6行7列
      for (let i = 1; i <= remainingDays; i++) {
        const date = new Date(year, month + 1, i);
        const events = getEventsForDate(date);
        days.push({
          date,
          isCurrentMonth: false,
          isToday: isToday(date),
          events: getRecommendedEvents(events)
        });
      }
      
      return days;
    });
    
    // 近期事件列表（按推荐排序）
    const upcomingEvents = computed(() => {
      const events = getUpcomingEvents(30);
      return getRecommendedEvents(events);
    });
    
    // 检查日期是否是今天
    const isToday = (date) => {
      const today = new Date();
      return date.getDate() === today.getDate() &&
             date.getMonth() === today.getMonth() &&
             date.getFullYear() === today.getFullYear();
    };
    
    // 检查是否是用户兴趣标签
    const isUserInterest = (tag) => {
      try {
        const savedTags = localStorage.getItem('userInterestTags');
        const userTags = savedTags ? JSON.parse(savedTags) : [];
        return userTags.includes(tag);
      } catch (error) {
        return false;
      }
    };
    
    // 获取指定日期的事件
    const getEventsForDate = (date) => {
      let events = astronomicalEvents.filter(event => {
        const eventDate = new Date(event.date);
        return eventDate.getDate() === date.getDate() &&
               eventDate.getMonth() === date.getMonth() &&
               eventDate.getFullYear() === date.getFullYear();
      });
      
      // 应用过滤器
      if (selectedEventType.value) {
        events = events.filter(event => event.type === selectedEventType.value);
      }
      
      if (searchQuery.value) {
        const query = searchQuery.value.toLowerCase();
        events = events.filter(event => 
          event.title.toLowerCase().includes(query) ||
          event.description.toLowerCase().includes(query) ||
          event.tags.some(tag => tag.toLowerCase().includes(query))
        );
      }
      
      return events;
    };
    
    // 格式化日期
    const formatDate = (date) => {
      return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        weekday: 'long'
      });
    };
    
    // 格式化时间
    const formatTime = (dateStr) => {
      const date = new Date(dateStr);
      return date.toLocaleTimeString('zh-CN', {
        hour: '2-digit',
        minute: '2-digit'
      });
    };
    
    // 格式化月份（短格式）
    const formatMonthShort = (dateStr) => {
      const date = new Date(dateStr);
      return date.toLocaleDateString('zh-CN', { month: 'short' });
    };
    
    // 格式化日期中的日
    const formatDayOfMonth = (dateStr) => {
      const date = new Date(dateStr);
      return date.getDate();
    };
    
    // 获取事件类型标签
    const getEventTypeLabel = (type) => {
      const typeMap = {
        'meteor_shower': '流星雨',
        'lunar_eclipse': '月食',
        'solar_eclipse': '日食',
        'planetary_opposition': '行星冲日',
        'planetary_configuration': '行星大距',
        'conjunction': '天体合'
      };
      return typeMap[type] || type;
    };
    
    // 选择日期
    const selectDay = (day) => {
        selectedDay.value = day;
      };
    
    // 选择事件
    const selectEvent = (event) => {
      const eventDate = new Date(event.date);
      const day = calendarDays.value.find(d => 
        d.date.getDate() === eventDate.getDate() &&
        d.date.getMonth() === eventDate.getMonth() &&
        d.date.getFullYear() === eventDate.getFullYear()
      );
      
      if (day) {
        selectDay(day);
      }
    };
    
    // 选择事件日期
    const selectEventDay = (event) => {
      const eventDate = new Date(event.date);
      currentDate.value = new Date(eventDate.getFullYear(), eventDate.getMonth());
      
      // 找到对应的日期对象
      const day = calendarDays.value.find(d => 
        d.date.getDate() === eventDate.getDate() &&
        d.date.getMonth() === eventDate.getMonth() &&
        d.date.getFullYear() === eventDate.getFullYear()
      );
      
      if (day) {
        selectDay(day);
      }
    };
    
    // 切换到上个月
    const prevMonth = () => {
      currentDate.value = new Date(currentDate.value.getFullYear(), currentDate.value.getMonth() - 1);
    };
    
    // 切换到下个月
    const nextMonth = () => {
      currentDate.value = new Date(currentDate.value.getFullYear(), currentDate.value.getMonth() + 1);
    };
    
    // 过滤事件
    const filterEvents = () => {
      // 重置选中的日期，重新计算日历
      selectedDay.value = null;
    };
    
    // 为事件设置浏览器提醒
    const setEventReminder = async (event) => {
      if (!notificationService.hasPermission()) {
        // 请求权限
        const granted = await notificationService.requestPermission();
        if (!granted) {
          notificationStatus.value = 'error';
          notificationMessage.value = '请在浏览器设置中允许通知';
          return;
        }
      }
      
      // 设置提醒
      notificationService.setEventReminder(event, selectedReminderTime.value);
      
      notificationStatus.value = 'success';
      notificationMessage.value = `已设置在事件开始前${selectedReminderTime.value}分钟提醒`;
      
      // 5秒后清除消息
      setTimeout(() => {
        notificationStatus.value = '';
        notificationMessage.value = '';
      }, 5000);
    };
    
    // 为事件设置邮件提醒
    const setEmailReminder = async (event) => {
      // 检查用户是否设置了邮箱
      if (!emailNotificationService.userEmail) {
        notificationStatus.value = 'warning';
        notificationMessage.value = '请先在设置中配置您的邮箱地址';
        return;
      }
      
      // 检查邮件提醒是否启用
      if (!emailNotificationService.emailPreferences.enabled) {
        notificationStatus.value = 'warning';
        notificationMessage.value = '请先在设置中启用邮件提醒功能';
        return;
      }
      
      // 设置邮件提醒
      const result = await emailNotificationService.setEventEmailReminder(event);
      
      if (result.success) {
        notificationStatus.value = 'success';
        notificationMessage.value = '邮件提醒设置成功';
      } else {
        notificationStatus.value = 'error';
        notificationMessage.value = result.error;
      }
      
      // 5秒后清除消息
      setTimeout(() => {
        notificationStatus.value = '';
        notificationMessage.value = '';
      }, 5000);
    };
    
    // 检查事件是否已设置提醒
    const hasEventReminder = (eventId) => {
      return notificationService.getEventReminders(eventId).length > 0 ||
             emailNotificationService.hasEventReminder(eventId);
    };
    
    // 组件挂载时选择今天
    onMounted(() => {
      const today = new Date();
      const todayDay = calendarDays.value.find(d => 
        d.date.getDate() === today.getDate() &&
        d.date.getMonth() === today.getMonth() &&
        d.date.getFullYear() === today.getFullYear()
      );
      
      if (todayDay) {
        selectDay(todayDay);
      }
    });
    
    return {
      currentDate,
      currentMonthYear,
      calendarDays,
      weekdays,
      selectedDay,
      selectedEventType,
      searchQuery,
      eventTypes,
      upcomingEvents,
      notificationStatus,
      notificationMessage,
      reminderTimes,
      selectedReminderTime,
      selectDay,
      selectEventDay,
      prevMonth,
      nextMonth,
      filterEvents,
      formatDate,
      formatTime,
      formatMonthShort,
      formatDayOfMonth,
      getEventTypeLabel,
      setEventReminder,
      setEmailReminder,
      hasEventReminder,
      isUserInterest
    };
  }
};
</script>

<style scoped>
.astronomy-event-calendar {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 2rem;
  color: var(--text-primary);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.calendar-header {
  margin-bottom: 2rem;
}

.calendar-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.calendar-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.current-month {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
}

.nav-button {
  background: var(--primary-color);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.875rem;
}

.nav-button:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
}

.event-filters {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.filter-select,
.search-input {
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 0.875rem;
}

.filter-select {
  flex: 1;
  max-width: 200px;
}

.search-input {
  flex: 2;
  min-width: 250px;
}

.calendar-grid {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 2rem;
  border: 1px solid var(--border-color);
}

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.weekday {
  text-align: center;
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.875rem;
  padding: 0.5rem 0;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
}

.calendar-day {
  aspect-ratio: 1;
  border-radius: 8px;
  padding: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  background: var(--bg-secondary);
  border: 2px solid transparent;
}

.calendar-day:hover {
  background: var(--bg-hover);
  transform: scale(1.05);
}

.calendar-day.other-month {
  opacity: 0.3;
}

.calendar-day.today {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
  color: white;
  font-weight: 700;
}

.calendar-day.has-event {
  border-color: var(--accent-color);
}

.day-number {
  font-size: 0.875rem;
  font-weight: 600;
  align-self: flex-start;
}

.day-events {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  align-self: flex-end;
}

.event-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.event-indicator.event-meteor_shower {
  background: #ff6b6b;
}

.event-indicator.event-lunar_eclipse {
  background: #ffa500;
}

.event-indicator.event-solar_eclipse {
  background: #ff4757;
}

.event-indicator.event-planetary_opposition {
  background: #5352ed;
}

.event-indicator.event-planetary_configuration {
  background: #74b9ff;
}

.event-indicator.event-conjunction {
  background: #00b894;
}

.more-events {
  font-size: 0.625rem;
  background: var(--accent-color);
  color: white;
  padding: 1px 4px;
  border-radius: 4px;
  font-weight: 600;
}

.selected-day-events {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  border: 1px solid var(--border-color);
}

.selected-day-events h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.25rem;
  color: var(--text-primary);
}

.no-events {
  text-align: center;
  color: var(--text-secondary);
  padding: 2rem;
  font-style: italic;
}

.event-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.event-card {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 1rem;
  transition: all 0.3s ease;
  border-left: 4px solid var(--accent-color);
}

.event-card:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.event-type-meteor_shower {
  border-left-color: #ff6b6b;
}

.event-type-lunar_eclipse {
  border-left-color: #ffa500;
}

.event-type-solar_eclipse {
  border-left-color: #ff4757;
}

.event-type-planetary_opposition {
  border-left-color: #5352ed;
}

.event-type-planetary_configuration {
  border-left-color: #74b9ff;
}

.event-type-conjunction {
  border-left-color: #00b894;
}

.event-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

.event-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  margin-right: 0.5rem;
}

.event-type-badge {
  background: var(--accent-color);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

.event-time {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
}

.event-description {
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

.event-details {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.detail-item {
  display: flex;
  gap: 0.5rem;
  font-size: 0.75rem;
}

.detail-label {
  color: var(--text-secondary);
  font-weight: 600;
}

.detail-value {
  color: var(--text-primary);
}

.event-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.event-tag {
      background: var(--bg-primary);
      color: var(--primary-color);
      padding: 0.25rem 0.5rem;
      border-radius: 4px;
      font-size: 0.75rem;
      font-weight: 600;
      transition: all 0.2s ease;
    }

    .event-tag.matched-tag {
      background-color: rgba(74, 158, 255, 0.3);
      color: #4a9eff;
      font-weight: 500;
      border: 1px solid rgba(74, 158, 255, 0.5);
    }
    
    /* 通知消息样式 */
    .notification-message {
      padding: 12px 16px;
      border-radius: 8px;
      margin: 15px 0;
      font-size: 14px;
    }
    
    .notification-message.success {
      background-color: rgba(76, 175, 80, 0.2);
      color: #4CAF50;
      border: 1px solid rgba(76, 175, 80, 0.3);
    }
    
    .notification-message.error {
      background-color: rgba(244, 67, 54, 0.2);
      color: #F44336;
      border: 1px solid rgba(244, 67, 54, 0.3);
    }
    
    .notification-message.warning {
      background-color: rgba(255, 193, 7, 0.2);
      color: #FFC107;
      border: 1px solid rgba(255, 193, 7, 0.3);
    }
    
    /* 提醒设置区域 */
    .reminder-section {
      margin-top: 25px;
      padding-top: 20px;
      border-top: 1px solid var(--border-color);
    }
    
    .reminder-section h3 {
      color: var(--text-primary);
      margin-bottom: 20px;
      font-size: 18px;
    }
    
    .reminder-option {
      margin-bottom: 20px;
    }
    
    .reminder-option h4 {
      color: var(--text-primary);
      margin-bottom: 10px;
      font-size: 16px;
    }
    
    .reminder-controls {
      display: flex;
      gap: 10px;
      align-items: center;
    }
    
    .reminder-time-select {
      padding: 8px 12px;
      border: 1px solid var(--border-color);
      border-radius: 6px;
      background: var(--bg-input);
      color: var(--text-primary);
      font-size: 14px;
      min-width: 150px;
    }
    
    .reminder-time-select:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
    }
    
    .reminder-button {
      padding: 10px 20px;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s;
    }
    
    .browser-reminder {
      background-color: var(--primary-color);
      color: white;
    }
    
    .browser-reminder:hover {
      background-color: var(--primary-hover);
    }
    
    .email-reminder {
      background-color: #2196F3;
      color: white;
    }
    
    .email-reminder:hover {
      background-color: #1976D2;
    }
    
    .reminder-note {
      display: block;
      margin-top: 8px;
      color: var(--text-secondary);
      font-size: 12px;
    }
    
    /* 已设置提醒样式 */
    .reminder-set {
      margin-top: 25px;
      padding: 15px;
      background-color: rgba(76, 175, 80, 0.2);
      border-radius: 8px;
      color: #4CAF50;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-direction: column;
      text-align: center;
    }
    
    .check-icon {
      font-size: 24px;
      font-weight: bold;
    }
    
    .reminder-set small {
      color: rgba(76, 175, 80, 0.7);
      margin-top: 5px;
    }
    
    /* 响应式设计调整 */
    @media (max-width: 600px) {
      .reminder-controls {
        flex-direction: column;
        align-items: stretch;
      }
      
      .reminder-time-select {
        width: 100%;
        margin-bottom: 10px;
      }
      
      .reminder-button {
        width: 100%;
      }
    }

.upcoming-events {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid var(--border-color);
}

.upcoming-events h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.25rem;
  color: var(--text-primary);
}

.upcoming-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.upcoming-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--bg-secondary);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.upcoming-item:hover {
  background: var(--bg-hover);
  transform: translateX(5px);
}

.event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--primary-color);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  min-width: 60px;
}

.event-month {
  font-size: 0.75rem;
  font-weight: 600;
}

.event-day {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.event-info {
  flex: 1;
}

.event-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

.event-icon {
  width: 40px;
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-meteor_shower {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ff6b6b" stroke-width="2"><path d="M22 15a2 2 0 0 0-2-2H6l-4 4V5a2 2 0 0 0-2-2h16a2 2 0 0 1 2 2z"></path></svg>');
}

.icon-lunar_eclipse {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffa500" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>');
}

.icon-solar_eclipse {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ff4757" stroke-width="2"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>');
}

.icon-planetary_opposition,
.icon-planetary_configuration {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%235352ed" stroke-width="2"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>');
}

.icon-conjunction {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2300b894" stroke-width="2"><circle cx="12" cy="12" r="3"></circle><circle cx="6" cy="12" r="2"></circle><circle cx="18" cy="12" r="2"></circle><line x1="3" y1="12" x2="5" y2="12"></line><line x1="19" y1="12" x2="21" y2="12"></line></svg>');
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .event-filters {
    flex-direction: column;
  }
  
  .filter-select,
  .search-input {
    max-width: none;
    min-width: unset;
  }
}

@media (max-width: 768px) {
  .astronomy-event-calendar {
    padding: 1rem;
  }
  
  .calendar-title {
    font-size: 1.5rem;
  }
  
  .calendar-controls {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .current-month {
    order: -1;
  }
  
  .nav-button {
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
  }
  
  .calendar-day {
    padding: 0.25rem;
  }
  
  .day-number {
    font-size: 0.75rem;
  }
  
  .upcoming-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .event-date {
    flex-direction: row;
    width: 100%;
    justify-content: center;
  }
  
  .event-day {
    margin: 0 0.5rem;
  }
}
</style>